按钮

2023-08-04 07:48| 来源: 网络整理| 查看: 265

按钮 - 页面元素向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。用法一个标准的按钮一个可跳转的按钮

主题名称组合原始 class="layui-btn layui-btn-primary" 默认 class="layui-btn" 百搭 class="layui-btn layui-btn-normal" 暖色 class="layui-btn layui-btn-warm" 警告 class="layui-btn layui-btn-danger" 禁用 class="layui-btn layui-btn-disabled" 主色按钮名称组合主色 class="layui-btn layui-btn-primary layui-border-green" 百搭 class="layui-btn layui-btn-primary layui-border-blue" 暖色 class="layui-btn layui-btn-primary layui-border-orange" 警告 class="layui-btn layui-btn-primary layui-border-red" 深色 class="layui-btn layui-btn-primary layui-border-black" 尺寸尺寸组合大型 class="layui-btn layui-btn-lg" 默认 class="layui-btn" 小型 class="layui-btn layui-btn-sm" 迷你 class="layui-btn layui-btn-xs" 尺寸组合大型百搭 class="layui-btn layui-btn-lg layui-btn-normal" 正常暖色 class="layui-btn layui-btn-warm" 小型警告 class="layui-btn layui-btn-sm layui-btn-danger" 迷你禁用 class="layui-btn layui-btn-xs layui-btn-disabled" 流体按钮（最大化适应）圆角主题组合原始 class="layui-btn layui-btn-radius layui-btn-primary" 默认 class="layui-btn layui-btn-radius" 百搭 class="layui-btn layui-btn-radius layui-btn-normal" 暖色 class="layui-btn layui-btn-radius layui-btn-warm" 警告 class="layui-btn layui-btn-radius layui-btn-danger" 禁用 class="layui-btn layui-btn-radius layui-btn-disabled" 尺寸组合大型百搭 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal" 小型警告 class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" 迷你禁用 class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

哈哈哈哈哈，这组合名长得简直没朋友~

图标按钮

温馨提示：各种图标字体请移步文档左侧【页面元素 - 图标】阅览

按钮组

将按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配

增加编辑删除        按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

按钮一按钮二按钮三结语

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自加一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）

layui - 在每一个细节中，用心与你沟通

【本文地址】

按钮

按钮

今日新闻

推荐新闻